<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" dir="ltr" lang="en-US">

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Columns | Bolder Premium Wordpress Theme</title>
                        
    <!-- BEGIN .styles -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="screen" />                      
    <link rel="stylesheet" href="css/prettyPhoto.css" type="text/css" media="screen" />   
    <link rel="stylesheet" href="css/tipsy.css" type="text/css" media="screen" />              
    <link rel="stylesheet" href="css/jCarousel.css" type="text/css" media="screen" />  
    
    <!--[if IE]> 
        <link rel="stylesheet" href="css/ie.css" type="text/css" media="screen, projection" /> 
    <![endif]-->
    <!--[if IE 7]>
        <link rel="stylesheet" href="css/ie7.css" type="text/css" media="screen" />
    <![endif]-->
	  
    <link rel="stylesheet" href="css/colors/black.css" type="text/css" media="screen" />   <!-- COLOR -->                
	<!-- END .styles -->           
    
    <!-- BEGIN .scripts -->
	<script type='text/javascript' src='js/jquery.js'></script>
	<script type='text/javascript' src='js/ui.core.js'></script>
	<script type='text/javascript' src='js/jquery.cycle.all.min.js'></script>
	<script type='text/javascript' src='js/jquery.nivo.slider.pack.js'></script>
	<script type='text/javascript' src='js/jquery.easing.1.3.js'></script>
	<script type='text/javascript' src='js/jquery.prettyPhoto.js'></script>
	<script type='text/javascript' src='js/jquery.jcarousel.min.js'></script>
	<script type='text/javascript' src='js/jquery.tipsy.js'></script>
	<script type='text/javascript' src='js/jquery.arrowFade.js'></script>
	<script type='text/javascript' src='js/ui.tabs.js'></script>
	<script type='text/javascript' src='js/jquery.custom.js'></script>                 
	<script type='text/javascript' src='js/jquery.tweetable.js'></script> 
	
	<script type='text/javascript' src='js/cufon-yui.js'></script>
	<script type='text/javascript' src='js/waukegan.font.js'></script>   
	<!-- END .scripts -->           

    <!-- [favicon] begin -->
    <link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
    <link rel="icon" type="image/x-icon" href="favicon.ico" />  
    <!-- [favicon] end -->
      
    <script type="text/javascript">
        Cufon.replace('h1, h2, h3:not(#footer h3, .title-blog), h4, h5, h6, table th', {fontFamily: 'Waukegan'});
        //Cufon.replace('.sidebar-nav a', {fontFamily: 'Champagne', hover: true});       
        
        jQuery(document).ready(function($){
            $("a[rel^='prettyPhoto']").prettyPhoto({
                theme: 'facebook'});
        });
    </script>             
    
</head>                   
        
<body class="no_js">
    <div id="top-space"></div>

    <!-- START HEADER -->
    <div id="header">
        
        <div class="inner">
        
            <!-- START LOGO -->
            <div id="logo">
                <a href="index.php" title="Bolder Premium Wordpress Theme">Bolder Premium Wordpress Theme</a>
            </div>
            <!-- END LOGO -->
			
			<!-- START NAV -->
            <div id="nav">
				
				<ul class="level-1 black">
					
					<li>
						<a href="index.html">Home</a><span> welcome</span>
						<ul class="sub-menu">
							<li>
								<a href="#">Slider</a>
								<ul class="sub-menu">
									<li><a href="home_full_width_fade.html">Full width fade</a></li>
									<li><a href="home_nivo_big.html">Nivo big</a></li>
									<li><a href="index.html">Slider arrow</a></li>
								</ul>
							</li>
							<li><a href="#">Footer</a>
								<ul class="sub-menu">
									<li><a href="index.html">Big footer</a></li>
									<li><a href="home_small_footer.html">Small footer</a></li>
								</ul>
							</li>
							<li><a href="#">Body</a>
								<ul class="sub-menu">
									<li><a href="home_with_sidebar.html">With sidebar</a></li>
									<li><a href="index.html">Without sidebar</a></li>
									<li><a href="home_without_slider.html">Without slider</a></li>
								</ul>
							</li>
						</ul>
					</li>
					
					<li>
						<a href="#">Colors</a><span> &amp; skins</span>
						<ul class="sub-menu">
							<li>
								<a href="#">Colors</a>
								<ul class="sub-menu">                           
									<li><a href="index.html">Black</a></li> 
									<li><a href="skin_blue.html">Blue</a></li>
									<li><a href="skin_grey.html">Grey</a></li>
									<li><a href="skin_violet.html">Violet</a></li>
									<li><a href="skin_ciano.html">Ciano</a></li>
									<li><a href="skin_white.html">White</a></li>
									<li><a href="skin_red.html">Red</a></li>
									<li><a href="skin_green.html">Green</a></li>
									<li><a href="skin_brown.html">Brown</a></li>
									<li><a href="skin_pink.html">Pink</a></li>
									<li><a href="skin_darkgrey.html">Darkrey</a></li>
								</ul>
							</li>             
							<li>
								<a href="#">Skins</a>   
								<ul class="sub-menu">    
									<li><a href="skin_wood.html">Wood</a></li>
									<li><a href="skin_fun.html">Fun</a></li>
									<li><a href="skin_grunge.html">Grunge</a></li>
									<li><a href="skin_sketch.html">Sketch</a></li>  
								</ul>
							</li>      
						</ul>
					</li>
					
					<li>
						<a href="#">Corporate</a><span> other pages</span>
						<ul class="sub-menu">
							<li><a href="about_us.html">About us</a></li>
							<li><a href="full_width_page.html">Full width page</a></li>
							<li><a href="left_sidebar.html">Left sidebar</a></li>
							<li><a href="right_sidebar.html">Right sidebar</a></li>   
							<li><a href="404.html">404 Page</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Portfolio</a><span> our works</span>
						<ul class="sub-menu">
							<li><a href="portfolio_3_column.html">3 Column</a></li>
							<li><a href="portfolio_with_slider.html">With slider</a></li>
							<li><a href="portfolio_big_image.html">Big Image</a></li>
						</ul>
					</li>
					
					<li>
						<a href="#">Shortcode</a><span> html tag &amp; more</span>    
						<ul class="sub-menu">
							<li><a href="shortcode_tipography.html">Tipography</a></li>
							<li><a href="shortcode_alertbox.html">Alert Box</a></li>
							<li><a href="shortcode_buttons.html">Buttons</a></li>
							<li><a href="shortcode_sections.html">33 Icon Section</a></li>
							<li><a href="shortcode_nivo.html">Nivo Slider</a></li>
							<li><a href="shortcode_tabs.html">Tabs and Toggles</a></li>
							<li><a href="shortcode_tables.html">Table</a></li>
							
							<li><a href="shortcode_lists.html">Styled List and Icon</a></li>
							<li><a href="shortcode_columns.html">Columns</a></li>
							
						</ul>
					</li>
					
					<li><a href="blog.html">Blog</a><span> news</span></li>
					
					<li>
						<a href="contact.html">Contact</a><span> get in touch</span>
						<ul class="sub-menu">
							<li><a href="contact.html">With google map</a></li>
							<li><a href="contact_without_map.html">Without map</a></li>
						</ul>
					</li>
					
				</ul>
				
			</div>            
			<!-- END NAV -->
            
            <div class="clear"></div>
            
        </div>
            
    </div>
    <!-- END HEADER -->   

    
    <!-- START CONTENT -->
    <div id="content">
    
        <div class="inner">                 
			<div class="clear"></div>
        
            <h2 class="title-page">Columns</h2>
            
            <h3>Four Column</h3>
            
            <!-- START SHORTCODE FOURTH COLUMN -->
            <div class="one-fourth">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.
                </p>
                
                <pre>&lt;div class="one-fourth"&gt;
	text
&lt;/div&gt;</pre>
            </div>
            
            <div class="one-fourth">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.
                </p>      
                
                <pre>&lt;div class="one-fourth"&gt;
	text
&lt;/div&gt;</pre>
            </div>
            
            <div class="one-fourth">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.
                </p>  
                
                <pre>&lt;div class="one-fourth"&gt;
	text
&lt;/div&gt;</pre>
            </div>
            
            <div class="one-fourth last">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu.
                </p> 
                
                <pre>&lt;div class="one-fourth last"&gt;
	text
&lt;/div&gt;</pre>
            </div>
            <div class="clear"></div>
            <!-- SEND SHORTCODE FOURTH COLUMN -->
            
            
            <hr/>
            
            <h3>Three Column</h3>
            
            <!-- START SHORTCODE THIRD COLUMN -->
            <div class="one-third">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis 
                    tincidunt arcu.<br/>Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                </p>
                
                <pre>&lt;div class="one-third"&gt;text&lt;/div&gt;</pre>
            </div>
            
            <div class="one-third">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis 
                    tincidunt arcu.<br/>Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                </p>   
                
                <pre>&lt;div class="one-third"&gt;text&lt;/div&gt;</pre>
            </div>
            
            <div class="one-third last">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis 
                    tincidunt arcu.<br/>Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                </p>     
                
                <pre>&lt;div class="one-third last"&gt;text&lt;/div&gt;</pre>
            </div>
            <div class="clear"></div>
            <!-- END SHORTCODE THIRD COLUMN -->
            
            
            <hr/>
            
            
            <h3>Two Column</h3>
            <!-- START SHORTCODE TWO COLUMN -->
            <div class="one-third">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis 
                    tincidunt arcu. Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                </p>   
                
                <pre>&lt;div class="one-third"&gt;text&lt;/div&gt;</pre>
            </div>
            
            <div class="two-third last">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque 
                    convallis adipiscing. Nunc leo dolor, fringilla quis egestas eget, 
                    hendrerit id velit. <strong>Etiam sed nibh purus</strong>, a volutpat quam. In hac 
                    habitasse platea dictumst. Phasellus ultrices purus et sapien laoreet fermentum.<br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque convallis adipiscing. 
                    Eaque ipsa quae ab illo veritatis et quasi architecto beatae vitae dicta.
                </p>   
                
                <pre>&lt;div class="two-third last"&gt;text&lt;/div&gt;</pre>
            </div>
            <div class="clear"></div>
            <!-- END SHORTCODE TWO COLUMN -->
            
            
            
            <hr/>
            
            
            <h3>Two Column</h3>
            <!-- START SHORTCODE TWO COLUMN -->
            <div class="two-third">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque 
                    convallis adipiscing. Nunc leo dolor, fringilla quis egestas eget, 
                    hendrerit id velit. <strong>Etiam sed nibh purus</strong>, a volutpat quam. In hac 
                    habitasse platea dictumst. Phasellus ultrices purus et sapien laoreet fermentum.<br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque convallis adipiscing.
                </p>          
                
                <pre>&lt;div class="two-third"&gt;text&lt;/div&gt;</pre>
            </div>
            
            <div class="one-third last">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing lorem ipsum dolor sit 
                    amet, consectetur adipiscing elit. Donec blandit enim libero, quis tincidunt arcu. 
                    Nulla scelerisque convallis adipiscing.
                </p>                   
                
                <pre>&lt;div class="one-third last"&gt;text&lt;/div&gt;</pre>
            </div>
            <div class="clear"></div>
            <!-- END SHORTCODE TWO COLUMN -->
            
            
            
            <hr/>
            
            
            <h3>Two Column</h3>
            <!-- START SHORTCODE TWO COLUMN -->
            <div class="two-fourth">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque 
                    convallis adipiscing. Nunc leo dolor, fringilla quis egestas eget, 
                    hendrerit id velit. <strong>Etiam sed nibh purus</strong>, a volutpat quam. In hac 
                    habitasse platea dictumst. Phasellus ultrices purus et sapien laoreet fermentum.<br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque convallis adipiscing.
                </p>            
                
                <pre>&lt;div class="two-fourth"&gt;text&lt;/div&gt;</pre>
            </div>
            
            <div class="two-fourth last">
                <p>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque 
                    convallis adipiscing. Nunc leo dolor, fringilla quis egestas eget, 
                    hendrerit id velit. <strong>Etiam sed nibh purus</strong>, a volutpat quam. In hac 
                    habitasse platea dictumst. Phasellus ultrices purus et sapien laoreet fermentum.<br/>
                    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla scelerisque convallis adipiscing.
                </p>               
                
                <pre>&lt;div class="two-fourth last"&gt;text&lt;/div&gt;</pre>
            </div>
            <div class="clear"></div>
            <!-- END SHORTCODE TWO COLUMN -->
            
            <hr/>
                        
        </div>              
    
    	<div class="clear"></div>
    
    </div>
    <!-- END CONTENT -->  
    
	<!-- START FLASH NEWS -->
	<div class="news-home">
        
        <div class="inner">
            <h2>News</h2>
            
            <ul>
                <li><a href="#">Bolder, a new WordPress Theme – buy it on Theme Forest</a> | January 16, 2011</li>
                <li><a href="#">All right! Now the news are dynamics!</a> | January 16, 2011</li>
                <li><a href="#">Make your choice from 18 different skins</a> | January 16, 2011</li>
            </ul>
        </div>        
            
        <div class="clear"></div>
                      
    </div>
	<!-- END FLASH NEWS -->
    
	<!-- START FOOTER -->
    <div id="footer">
        <div class="inner five">
        
        	<!-- START COMPANY MENU -->
            <div class="section">
				<h3>Company</h3>
				
				<ul class="menu">
					<li><a href="about.html">About us</a></li>
					<li><a href="services.html">Services</a></li>
					<li><a href="portfolio.html">Portfolio</a></li>
					<li><a href="blog.html">Blog</a></li>
					<li><a href="contact.html">Contact</a></li>
				</ul>
			</div>            
        	<!-- END COMPANY MENU -->
			                         
        	<!-- START TWITTER -->
			<div class="section">
				<h3>Tweets</h3>   	              
				
				<div class="twitter-container"></div>
					
				<script type="text/javascript">
				jQuery(function(){
					jQuery('.twitter-container').tweetable({
						id: 'tweets',
						username: 'YIW', 
						time: true, 
						limit: 2, 
						replies: true
					});
				});
				</script>
			</div>                
        	<!-- END TWITTER -->
			                         
        	<!-- START FLICKR -->
			<div class="section">
				<h3>Flickr</h3>
				
				<div class="flickr">    
					<script type="text/javascript" src="http://www.flickr.com/badge_code_v2.gne?count=6&amp;display=latest&amp;&amp;layout=x&amp;source=user&amp;user=43893867@N04&amp;size=s"></script>
				</div>
			</div>
        	<!-- END FLICKR -->
			                         
        	<!-- START SOCIALS -->
			<div class="section">
				<h3>Socials</h3>
				
				<ul class="menu">
					<li><a href="http://feeds.feedburner.com/yourinspirationweb/HuJt">Subscribe feed</a></li>
					<li><a href="http://www.facebook.com/YIWeb">Our Facebook page</a></li>
					<li><a href="http://twitter.com/YIW/">Follow us on twitter</a></li>
					<li><a href="#">Flickr</a></li>
					<li><a href="#">LinkedIn</a></li>
				</ul>
			</div>
        	<!-- END SOCIALS -->
			                         
        	<!-- START GET IN TOUCH -->
			<div class="section last">
				<h3>Get in touch</h3>			
				
				<div class="textwidget">
					<address>
					  	Bolder Theme,<br />
					  	115 Avenue street NY<br />
					
					  	<strong>Phone</strong>: + 39 347 8785621<br />
					</address>
                
					<a href="#" class="contact">
					   <strong>Have a question?</strong><br />
					    <span>Contact us</span>    
					</a>
				</div>
			</div>  
        	<!-- END GET IN TOUCH -->
    
            <div class="clear"></div>  
        
        </div> 
    </div>
    <!-- END FOOTER -->  
      
    
    <!-- START COPYRIGHT -->
    <p id="copyright">Copyright 2010 - Bolder Theme, theme by <a href="http://www.yourinspirationweb.com/en">Your Inspiration Web</a> | purchase it on <a href="http://themeforest.net/?ref=Sara_p">Theme Forest</a></p>
    <!-- END COPYRIGHT -->                                    
    
    <script type="text/javascript">
        //<![CDATA[
        Cufon.now();  //]]>   
    </script>
    
         
    
    <script type="text/javascript">

	  var _gaq = _gaq || [];
	  _gaq.push(['_setAccount', 'UA-8632327-9']);
	  _gaq.push(['_trackPageview']);
	
	  (function() {
	    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
	    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
	    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
	  })();
	
	</script>

</body>
</html>
